import MyHeader from '../components/MyHeader'
import { Menu } from 'antd';
import { menuList } from '../Router/page'
import { useNavigate, Outlet } from 'react-router-dom'

const Home = () => {

    const navigate = useNavigate()
    
    const handleClick = (data) => {
        const { key } = data;

        navigate(key)
    }

    return <div className="home-box">
        <MyHeader />
        <div className="body">
            <div className="menu-box">
                <Menu
                    onClick={handleClick}
                    style={{ width: "100%" }}
                    mode="inline"
                >
                    {
                        menuList.map((item) => {
                            return <Menu.Item key={item.path}>{item.title}</Menu.Item>
                        })
                    }
                    
                   
                </Menu>
            </div>
            <div className="content">
                <Outlet/>
            </div>
        </div>
    </div>
}

export default Home
